<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        * {
            scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.2);
        }

        body {
            color: white;
            font-family: Arial, sans-serif;
            font-style: normal;
            font-variant: normal;
            font-weight: 500;
            background-color: rgb(28, 27, 27);
        }
    
        #eTextTranslated,
        #eOrigText {
            padding: 14px;
            font-size: 16px;
            max-width: 500px;
            max-height: 200px;
            overflow: auto;
            white-space: pre-wrap;
        }
    
        #eOrigText {
            outline: none;
        }
    
        ul {
            margin: 0;
            padding: 3px;
            list-style-type: none;
            overflow: hidden;
            user-select: none;
        }
    
        li {
            margin: 5px;
            float: left;
            cursor: pointer;
            text-align: center;
            vertical-align: middle;
            padding: 4px 6px;
            border-radius: 5px;
            box-shadow: 0 0 3px -2px black;
            background-color: rgba(0, 0, 0, 0.3);
            border: none;
            transition: 0.2s;
        }
    
        li:hover {
            transform: translateY(-1px);
        }
    
        hr {
            width: 95%;
            border: 1px rgba(255, 255, 255, 0.75) solid;
        }
    
        .selected {
            background-color: rgba(0, 0, 0, 0.8);
            border: none;
        }
        
        #listen {
            padding-top: 6px;
            padding-bottom: 2px;
        }

    </style>
</head>

<body>
<div>
    <div id="eOrigTextDiv">
        <div id="eOrigText" contentEditable="true" spellcheck="false" dir="auto"></div>
        <hr>
    </div>
    <div id="eTextTranslated" dir="auto"></div>
    <div style="display: flex; justify-content: space-between; flex-direction:row;">
        <ul id="setTargetLanguage">
            <li value="en" title="English">en</li>
            <li value="es" title="Spanish">es</li>
            <li value="de" title="German">de</li>
        </ul>
        <ul>
            <li title="Google" id="sGoogle">g</li>
            <li title="Yandex" id="sYandex">y</li>
            <li title="Bing" id="sBing">b</li>
            <li title="DeepL" id="sDeepL" hidden>d</li>
        </ul>
        <ul>
            <li title="Copy" data-i18n-title="btnCopy" id="copy">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 7H7V5H13V7Z" fill="currentColor"/>
                    <path d="M13 11H7V9H13V11Z" fill="currentColor"/>
                    <path d="M7 15H13V13H7V15Z" fill="currentColor"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3 19V1H17V5H21V23H7V19H3ZM15 17V3H5V17H15ZM17 7V19H9V21H19V7H17Z" fill="currentColor"/>
                </svg>
            </li>
            <li style="padding-top: 6px; padding-bottom: 2px;fill: white;" title="Listen" data-i18n-title="btnListen"id="listen">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                     x="0px" y="0px" width="10px" height="10px" viewBox="0 0 93.038 93.038"
                     style="enable-background:new 0 0 93.038 93.038;" xml:space="preserve">
                            <g>
                                <path d="M46.547,75.521c0,1.639-0.947,3.128-2.429,3.823c-0.573,0.271-1.187,0.402-1.797,0.402c-0.966,0-1.923-0.332-2.696-0.973
                                l-23.098-19.14H4.225C1.892,59.635,0,57.742,0,55.409V38.576c0-2.334,1.892-4.226,4.225-4.226h12.303l23.098-19.14
                                c1.262-1.046,3.012-1.269,4.493-0.569c1.481,0.695,2.429,2.185,2.429,3.823L46.547,75.521L46.547,75.521z M62.784,68.919
                                c-0.103,0.007-0.202,0.011-0.304,0.011c-1.116,0-2.192-0.441-2.987-1.237l-0.565-0.567c-1.482-1.479-1.656-3.822-0.408-5.504
                                c3.164-4.266,4.834-9.323,4.834-14.628c0-5.706-1.896-11.058-5.484-15.478c-1.366-1.68-1.24-4.12,0.291-5.65l0.564-0.565
                                c0.844-0.844,1.975-1.304,3.199-1.231c1.192,0.06,2.305,0.621,3.061,1.545c4.977,6.09,7.606,13.484,7.606,21.38
                                c0,7.354-2.325,14.354-6.725,20.24C65.131,68.216,64.007,68.832,62.784,68.919z M80.252,81.976
                                c-0.764,0.903-1.869,1.445-3.052,1.495c-0.058,0.002-0.117,0.004-0.177,0.004c-1.119,0-2.193-0.442-2.988-1.237l-0.555-0.555
                                c-1.551-1.55-1.656-4.029-0.246-5.707c6.814-8.104,10.568-18.396,10.568-28.982c0-11.011-4.019-21.611-11.314-29.847
                                c-1.479-1.672-1.404-4.203,0.17-5.783l0.554-0.555c0.822-0.826,1.89-1.281,3.115-1.242c1.163,0.033,2.263,0.547,3.036,1.417
                                c8.818,9.928,13.675,22.718,13.675,36.01C93.04,59.783,88.499,72.207,80.252,81.976z"/>
                            </g>
                </svg>
            </li>
        </ul>
    </div>
</div>

<script src="/lib/languages.js"></script>
<script src="/lib/config.js"></script>
<script src="/lib/i18n.js"></script>
<script src="/contentScript/play.js"></script>
<script src="popup-translate-text.js"></script>
</body>

</html>
